<template>
  <div class="app-container" style="width: 100%;">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">

        <el-form-item style="margin-right: 15px;">
          <el-input v-model="<string>queryParams.name" placeholder="机构名称"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
        </el-form-item>

        <el-form-item>
          <el-button @click="add()">新增艺术机构</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <el-table :data="departPageData" style="width: 100%" border>
        <el-table-column label="机构名称" prop="name" />
        <el-table-column prop="url" label="机构首页封面照片">
          <template #default="scope">
            <img v-if="scope.row.url !== null && scope.row.url !== ''" :src="scope.row.url" alt=""
              style="width: 100px;height: 100px;">
          </template>
        </el-table-column>
        <el-table-column label="旗下艺术家" prop="num" />
        <el-table-column label="排序" prop="sort" />
        <el-table-column label="状态" prop="status" />
        <el-table-column label="机构分类">
          <template #default="scope">
            <span v-if="scope.row.departType === null">未设置</span>
            <span v-if="scope.row.departType !== null">{{ departTypeList.find(item => item.typeId)?.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属区域" prop="" align="center">
          <template #default="scope">
            <span v-if="scope.row.region === null">未设置</span>
            <span v-if="scope.row.region !== null">{{ regionList.find(item => item.id)?.cityname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="详细地址" prop="address" align="center" />
        <el-table-column label="是否显示" prop="isIndex" />
        <el-table-column label="操作" fixed="right" align="left" width="230">
          <template #default="scope">
            <el-button style="margin-bottom: 5px;margin-left:5px" plain size="small" @click="editArtists(scope.row)">
              绑定艺术家
            </el-button>
            <el-button style="margin-bottom: 5px;margin-left:5px" plain size="small" @click="editArtworks(scope.row)">
              查看作品在线
            </el-button>
            <el-button style="margin-bottom: 5px;margin-left:5px" plain size="small" @click="editArticles(scope.row)">
              文章编辑
            </el-button>

            <el-button style="margin-bottom: 5px;margin-left:5px" plain size="small" @click="editPictures(scope.row)">
              图片编辑
            </el-button>

            <el-button style="margin-bottom: 5px;margin-left:5px" plain size="small" @click="editTemplate(scope.row)">
              编辑模板
            </el-button>
            <el-button style="margin-bottom: 5px;margin-left:5px" type="primary" plain size="small"
              @click="edit(scope.row)">
              修改
            </el-button>
            <el-button v-if="scope.row.isBase !== 1" style="margin-bottom: 5px;margin-left:5px" type="danger" plain
              size="small" @click="deleteRow(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
    </el-card>

    <!-- 艺术机构新增/修改弹框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="30%">
      <el-form :model="editForm" label-width="120px">
        <el-form-item label="机构名称">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="机构首页封面">
          <single-upload v-model="<string>editForm.url" />
        </el-form-item>
        <el-form-item label="机构类型">
          <el-select v-model="<string>editForm.departType" filterable>

            <el-option v-for="item in departTypeList" :key="<string>item.typeId" :label="<string>item.name"
              :value="<string>item.typeId" />
          </el-select>
        </el-form-item>
        <el-form-item label="区域">

          <el-select v-model="<number>editForm.region" filterable>
            <el-option v-for="item in regionList" :key="<number>item.id" :label="<string>item.cityname"
              :value="<number>item.id" />

          </el-select>

        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="editForm.address" />
        </el-form-item>
        <el-form-item label="seo关键词">
          <el-input v-model="editForm.seoKeyworks" />
        </el-form-item>
        <el-form-item label="seo描述">
          <el-input v-model="editForm.seoDescription" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="editForm.sort" />
        </el-form-item>
        <el-form-item label="是否首页显示">
          <el-select v-model="<number>editForm.isIndex">
            <el-option label="否" :value="0" />
            <el-option label="是" :value="1" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">
            取 消
          </el-button>
          <el-button type="primary" @click="editItem">
            确 定
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 艺术机构绑定艺术家弹框 -->
    <el-dialog :title="artistkDialog.title" v-model="artistkDialog.visible" width="512">
      <div style="margin-bottom: 15px;">
        <el-input v-model="searchArtistName" style="width: 200px;margin-right: 15px;" size="small"
          placeholder="模糊搜索艺术家名字"></el-input>
        <el-button type="primary" size="small" @click="handleQueryArtist">
          查询
        </el-button>
      </div>
      <div style="display: flex;">
        <div style="float: left;margin-right: 17px;">
          <el-table height="400" :data="artistsPageData" border style="width: 230px;">
            <el-table-column label="艺术家" prop="name" align="center" />
            <el-table-column label="操作" fixed="right" align="left" width="80">
              <template #default="scope">
                <el-button type="primary" size="small" @click="addArtistToSelected(scope.row)">
                  添加
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="float: left;">
          <el-table height="400" :data="selectArtists" border style="width: 230px;">
            <el-table-column :label="'已选艺术家(' + (selectArtists.length) + ')'" prop="artistName" align="center" />
            <el-table-column label="操作" fixed="right" align="left" width="80">
              <template #default="scope">
                <el-button type="danger" size="small" @click="removeArtistFromSelected(scope.row)">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="clear: both;"></div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="artistkDialog.visible = false">
            取 消
          </el-button>
          <el-button type="primary" @click="saveRelation">
            确 定
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑文章弹框 start -->
    <el-dialog :title="articlesDialog.title" v-model="articlesDialog.visible" width="95%" @close="clearArticleData">
      <div style="display: flex;">
        <div style="width: 250px;border-right: 1px dashed #ccc;padding-right: 10px;">
          <div style="margin-bottom: 10px;">
            <el-input v-model="newTag" style="width: 150px;margin-right: 10px"></el-input><el-button
              @click="addArticleTag">新增</el-button>
          </div>
          <el-table :data="tagList" border>
            <el-table-column label="文章标签" prop="name" align="center" />
            <el-table-column label="操作" align="center" width="70px">
              <template #default="scope">
                <el-button v-if="scope.row.value !== null && scope.row.value !== ''" type="danger" size="small"
                  @click="removeTag(scope)">
                  删
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="flex: 1;padding-left: 10px">
          <template v-if="articlesDialog.type === 0">
            <div style="margin-bottom: 10px;"><el-button @click="addArticle">新增</el-button><el-button
                @click="editArticle">编辑</el-button> <el-button @click="delArticle">删除</el-button> </div>
            <div style="width: 100%;">
              <el-table width="100%" :data="articlePageData" highlight-current-row
                @current-change="handleCurrentChangeArticle" border>
                <el-table-column label="文章标题" prop="name" />
                <el-table-column label="排序" prop="sort" />
                <el-table-column label="标签" prop="name" />
                <el-table-column label="封面图">
                  <template #default="scope">
                    <img v-if="scope.row.url !== null && scope.row.url !== ''" :src="scope.row.url" alt=""
                      style="width: 100px;height: 100px;">
                  </template>
                </el-table-column>
              </el-table>
              <pagination v-if="articleTotal > 0" v-model:total="articleTotal" v-model:page="queryArticleParams.pageNum"
                v-model:limit="queryArticleParams.pageSize" @pagination="handleArticleQuery" />
            </div>

          </template>
          <template v-if="articlesDialog.type === 1">
            <div style="margin-bottom: 10px;">
              <el-button type="primary" plain @click="saveArticle" style="float: left;">保存</el-button>
              <el-button @click="backArticleList" style="float: right;">返回</el-button>
              <div style="clear: both;"></div>
            </div>
            <el-form label-width="auto">
              <el-form-item label="文章标题">
                <el-input v-model="editArticleForm.name" />
              </el-form-item>
              <el-form-item label="文章标签">
                <el-checkbox-group v-model="tagscheckBoxList">
                  <template v-for="(item, index) in tagList">
                    <el-checkbox v-if="item.value !== null && item.value !== ''" :label="item.value"
                      :value="item.value" />
                  </template>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="文章封面">
                <single-uploadp v-model="<string>editArticleForm.url" />
              </el-form-item>
              <el-form-item label="文章简述">
                <el-input type="textarea" v-model="editArticleForm.indexContent" />
              </el-form-item>
              <el-form-item label="文章内容">
                <TEditor :parentData="<string>parentData" v-model="<string>editArticleForm.content">
                </TEditor>
              </el-form-item>
            </el-form>
          </template>
        </div>
      </div>
    </el-dialog>
    <!-- 编辑文章弹框 end -->

    <!-- 编辑图片弹框 start -->
    <el-dialog :title="pictureDialog.title" v-model="pictureDialog.visible" width="95%" @close="clearPictureData">
      <div style="display: flex;">
        <div style="width: 250px;border-right: 1px dashed #ccc;padding-right: 10px;">
          <div style="margin-bottom: 10px;">
            <el-input v-model="newTag" style="width: 150px;margin-right: 10px"></el-input><el-button
              @click="addPictureTag">新增</el-button>
          </div>
          <el-table :data="tagList" border>
            <el-table-column label="图片标签" prop="name" align="center" />
            <el-table-column label="操作" align="center" width="70px">
              <template #default="scope">
                <el-button v-if="scope.row.value !== null && scope.row.value !== ''" type="danger" size="small"
                  @click="removePictureTag(scope)">
                  删
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="flex: 1;padding-left: 10px">
          <template v-if="pictureDialog.type === 0">
            <div style="margin-bottom: 10px;"><el-button @click="addPicture">新增</el-button><el-button
                @click="editPictre">编辑</el-button> <el-button @click="delPicture">删除</el-button> </div>
            <div style="width: 100%;">
              <el-table width="100%" :data="picturePageData" highlight-current-row
                @current-change="handleCurrentChangePicture" border>
                <el-table-column label="图片标题" prop="name" />
                <el-table-column label="排序" prop="sort" />
                <el-table-column label="标签" prop="name" />
                <el-table-column label="图片">
                  <template #default="scope">
                    <img v-if="scope.row.url !== null && scope.row.url !== ''" :src="scope.row.url" alt=""
                      style="width: 100px;height: 100px;">
                  </template>
                </el-table-column>
              </el-table>
              <pagination v-if="pictureTotal > 0" v-model:total="pictureTotal" v-model:page="queryPictureParams.pageNum"
                v-model:limit="queryPictureParams.pageSize" @pagination="handlePictureQuery" />
            </div>

          </template>
          <template v-if="pictureDialog.type === 1">
            <div style="margin-bottom: 10px;">
              <el-button type="primary" plain @click="savePicture" style="float: left;">保存</el-button>
              <el-button @click="backPictureList" style="float: right;">返回</el-button>
              <div style="clear: both;"></div>
            </div>
            <el-form label-width="auto">
              <el-form-item label="图片标题">
                <el-input v-model="editPictureForm.name" />
              </el-form-item>
              <el-form-item label="图片标签">
                <el-checkbox-group v-model="tagscheckBoxList">
                  <template v-for="(item, index) in tagList">
                    <el-checkbox v-if="item.value !== null && item.value !== ''" :label="item.value"
                      :value="item.value" />
                  </template>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="图片">
                <single-uploadp v-model="<string>editPictureForm.url" />
              </el-form-item>

            </el-form>
          </template>
        </div>
      </div>
    </el-dialog>
    <!-- 编辑图片弹框 end -->

    <!-- 艺术机构绑定艺术家弹框 -->
    <el-dialog :title="artworkDialog.title" v-model="artworkDialog.visible" width="1200">
      <!-- filterable :filter-method="filterMethod" -->
      <!-- v-model="selectArtists" :data="artistsPageData" -->
      <div style="margin-bottom: 15px;text-align: right;padding-right: 30px;">
        <!-- <el-input v-model="searchArtistName" style="width: 200px;margin-right: 15px;" size="small"
          placeholder="模糊搜索艺术品名字"></el-input>
        <el-button type="primary" size="small" @click="handleQueryArtwrok">
          查询
        </el-button> -->
        <!-- <el-button type="primary" size="small" @click="handleAddArtwork">
          添加
        </el-button> -->
      </div>
      <div style="display: flex;">

        <div style="float: left;">
          <el-table height="400" :data="selectArtists" highlight-current-row @current-change="handleCurrentChangeArtist"
            border style="width: 230px;">
            <el-table-column :label="'已绑定艺术家(' + (selectArtists.length) + ')'" prop="artistName" align="center" />
          </el-table>
        </div>
        <div style="float: left;margin-left: 17px;width: 900px;">
          <el-table height="400" :data="artworkPageData" border>
            <el-table-column label="艺术品名称" prop="name" align="center" />
            <el-table-column label="艺术家" prop="name" align="center" />
            <el-table-column label="艺术品" prop="name" align="center" />
            <el-table-column label="排序" fixed="right" align="left">
              <template #default="scope">
                <el-input-number v-model="scope.row.sort" />

              </template>
            </el-table-column>
          </el-table>
          <pagination v-if="artworkTotal > 0" v-model:total="artworkTotal" v-model:page="queryArtworkParams.pageNum"
            v-model:limit="queryArtworkParams.pageSize" @pagination="initNotInArtworkPageData" />
        </div>
        <div style="clear: both;"></div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeArtworkDialog()">
            取 消
          </el-button>
          <el-button type="primary" @click="saveArtworkRelation">
            保存排序
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog :title="relativeArtworkDialog.title" v-model="relativeArtworkDialog.visible" width="90%">
      <div style="display: flex;">
        <div style="flex: 1;padding-left: 10px">
          <div style="margin-bottom: 10px;">
            <el-input v-model="queryArtworkParams.name" placeholder="搜索艺术品名字"
              style="width: 200px;margin-right: 10px"></el-input>
            <el-input v-model="queryArtworkParams.artistName" placeholder="搜索艺术家名字"
              style="width: 200px;margin-right: 10px"></el-input>
            <el-input v-model="queryArtworkParams.artworkNum" placeholder="搜索艺术品编号"
              style="width: 200px;margin-right: 10px"></el-input>
            <el-button @click="initNotInArtworkPageData">搜索</el-button>
          </div>
          <div style="width: 100%;">
            <el-table width="100%" :data="notInArtworkPageData" highlight-current-row border>
              <el-table-column label="艺术品名称" prop="name" />
              <el-table-column label="艺术家" prop="artistName" />
              <el-table-column label="编号" prop="artworkNum" />
              <el-table-column label="图片">
                <template #default="scope">
                  <img v-if="scope.row.url !== null && scope.row.url !== ''" :src="scope.row.url" alt=""
                    style="width: 100px;height: 100px;">
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="primary" @click="addArtworkToContent(scope.row, scope.$index)">艺术品加入作品在线</el-button>
                  <div>
                    <el-checkbox-group v-model="onlineTagscheckBoxList[scope.$index]">
                      <template v-for="(item, index) in tagList">
                        <el-checkbox v-if="item.value !== null && item.value !== ''" :label="item.name"
                          :value="item.value" />
                      </template>
                    </el-checkbox-group>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-if="artworkTotal > 0" v-model:total="artworkTotal" v-model:page="queryArtworkParams.pageNum"
              v-model:limit="queryArtworkParams.pageSize" @pagination="initNotInArtworkPageData" />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import RegionAPI from "@/api/region";
import { Region, RegionQuery, RegionPageVO } from "@/api/region/model";
import DepartTypeAPI from "@/api/departType";
import { DepartType, DepartTypeQuery, DepartTypePageVO } from "@/api/departType/model";


// 机构接口
import DepartAPI from "@/api/depart";
import { DepartForm, Depart, DepartQuery, DepartPageVO } from "@/api/depart/model";
// 艺术家接口
import ArtistsAPI from "@/api/artist";
import { Artist, ArtistPageVO, ArtistQuery } from "@/api/artist/model";
// 机构艺术家关联接口
import ArtistRelativeAPI from "@/api/artistRelative";
import { ArtistRelativeDTO, ArtistRelative } from "@/api/artistRelative/model"
// 文章接口
import ArticleApi from "@/api/article";
import { ArticleQuery, ArticlePageResult, ArticleForm, ArticlePageVO } from "@/api/article/model"
// 图片接口
import PictureApi from "@/api/picture";
import { PictureQuery, PicturePageResult, PictureForm, PicturePageVO } from "@/api/picture/model"

// 组件
import SingleUpload from "@/components/Upload/SingleUploadd.vue";
import SingleUploadp from "@/components/Upload/SingleUploadp.vue";
import TEditor from "@/components/TEditor/TEditor.vue";



import router from "@/router";


import { Artwork, ArtworkQuery, ArtworkPageVO, ArtworkForm } from "@/api/artwork/model";
import ArtworkAPI from "@/api/artwork";



defineOptions({
  name: "Depart",
  inheritAttrs: false,
});
// 绑定艺术家数据
const selectArtists = ref<ArtistRelative[]>([]);


const departTypeList = ref<DepartType[]>([]);

const regionList = ref<Region[]>([]);

// 选中的机构id
const selectDepartId = ref<string>("");

// 选中文章
const selectArticle = ref<ArticlePageVO>({});

const selectPicture = ref<PicturePageVO>({});

// 艺术家列表
const artistsPageData = ref<ArtistPageVO[]>([]);

const artworkPageData = ref<Artwork[]>([]);
// 绑定艺术家弹框搜索艺术家名字
const searchArtistName = ref<string>("");

const queryFormRef = ref(ElForm);

const artworkTotal = ref(0)


const editForm = reactive<DepartForm>({

});

const parentData = ref<string>('')
// 文章新增/修改数据
const editArticleForm = reactive<ArticleForm>({
  id: null,
  name: "",
  articleId: "",
  createUser: null,
  createTime: null,
  updateTime: null,
  sort: null,
  status: null,
  url: null,
  isIndex: null,
  plateType: null,
  plateId: "",
  tags: "",
  content: "",
})
// 文章分页选中的数据
const selectDditArticleForm = reactive<ArticleForm>({
  id: null,
  name: "",
  articleId: "",
  createUser: null,
  createTime: null,
  updateTime: null,
  sort: null,
  status: null,
  url: null,
  isIndex: null,
  plateType: null,
  plateId: "",
  tags: "",
  content: "",
  indexContent: ""
})
// 文章分页选中的数据
const selectDditArtistForm = reactive<Artist>({

})
// 图片分页选中的数据
const selectDditPictureForm = reactive<PictureForm>({
  id: null,
  name: "",
  pictureId: "",
  createUser: null,
  createTime: null,
  updateTime: null,
  sort: null,
  status: null,
  url: null,
  isIndex: null,
  plateType: null,
  plateId: "",
  tags: "",
  content: "",
})

// 图片新增/修改数据
const editPictureForm = reactive<PictureForm>({
  id: null,
  name: "",
  pictureId: "",
  createUser: null,
  createTime: null,
  updateTime: null,
  sort: null,
  status: null,
  url: null,
  isIndex: null,
  plateType: null,
  plateId: "",
  tags: "",
  content: "",
})


// 新增/修改数据选中的表填数据
const tagscheckBoxList = ref<string[]>([])

const onlineTagscheckBoxList = ref<string[]>([])
const loading = ref(false);
const editDialogVisible = ref(false);
// 新增标签的数据
const newTag = ref<string>("")
// 标签列表
const tagList = ref([
  {
    name: "全部",
    value: ""
  },
])


const total = ref(0);

const articleTotal = ref(0)

const pictureTotal = ref(0)
// 艺术机构分页查询参数
const queryParams = reactive<DepartQuery>({
  pageNum: 1,
  pageSize: 10,
  name: ""
});
// 艺术家分页查询参数
const queryArtistParams = reactive<ArtistQuery>({
  pageNum: 1,
  pageSize: 100,
  honors: null
});
// 文章分页查询参数
const queryArticleParams = reactive<ArticleQuery>({
  pageNum: 1,
  pageSize: 10,
  plateId: "",
  plateType: 1,
});
// 图片分页查询参数
const queryPictureParams = reactive<PictureQuery>({
  pageNum: 1,
  pageSize: 10,
  plateId: "",
  plateType: 1,
});
// 机构分页数据
const departPageData = ref<DepartPageVO[]>();
// 文章分页数据
const articlePageData = ref<ArticlePageVO[]>();
// 图片分页数据
const picturePageData = ref<PicturePageVO[]>();

const notInArtworkPageData = ref<ArtworkPageVO[]>();

// 艺术机构编辑框
const dialog = reactive({
  title: "",
  visible: false,
});
// 绑定艺术家弹框
const artistkDialog = reactive({
  title: "绑定艺术家",
  visible: false,
});
// 打开文章编辑
const articlesDialog = reactive({
  title: "编辑文章",
  visible: false,
  type: 0
});
// 打开图片编辑
const pictureDialog = reactive({
  title: "编辑图片",
  visible: false,
  type: 0
});

// 绑定艺术家弹框
const artworkDialog = reactive({
  title: "查看作品在线",
  visible: false,
});

const relativeArtworkDialog = reactive({
  title: "选取艺术品",
  visible: false,
});

const artistRelativeDTO = reactive<ArtistRelativeDTO>({
  departId: null,
  artistRelativeList: []
})

// 艺术品分页查询参数
const queryArtworkParams = reactive<ArtworkQuery>({
  pageNum: 1,
  pageSize: 10,
  departId: "",
});

/**
 * 打开新增弹框
 */
function add() {
  editForm.id = null
  editForm.name = null;
  editForm.departId = null;
  editForm.createUser = null;
  editForm.isIndex = 0;
  editForm.url = "";
  editForm.departId = "";
  editForm.region = null;
  editForm.address = "";
  editForm.seoKeyworks = "";
  editForm.seoDescription = "";
  dialog.visible = true;

}
/**
 * 打开修改弹框
 * @param row 
 */
function edit(row: Depart) {
  editForm.id = row.id;
  editForm.name = row.name;
  editForm.departId = row.departId
  editForm.createUser = row.createUser;
  editForm.createTime = row.createTime;
  editForm.updateTime = row.updateTime
  editForm.sort = row.sort
  editForm.url = row.url;
  editForm.departId = row.departId;
  editForm.departType = row.departType;
  editForm.region = row.region;
  editForm.address = row.address;
  editForm.seoKeyworks = row.seoKeyworks;
  editForm.seoDescription = row.seoDescription;
  editForm.isIndex = row.isIndex
  dialog.visible = true;
}
/**
 * 打开绑定艺术家弹框
 * @param row 
 */
function editArtists(row: Depart) {
  console.log(row.id, "绑定艺术家")
  selectDepartId.value = <string>row.departId
  artistRelativeDTO.departId = row.departId
  artistRelativeDTO.artistRelativeList = []
  initSelectArtists()
  artistkDialog.visible = true;
}
/**
 * 打开绑定艺术品弹框
 * @param row 
 */
function editOnlines(row: Depart) {
  console.log(row.id, "绑定艺术家")
  selectDepartId.value = <string>row.departId
  artistRelativeDTO.departId = row.departId
  artistRelativeDTO.artistRelativeList = []
  initSelectArtists()
  artistkDialog.visible = true;
}

/**
 * 打开编辑文章列表
 * @param row 
 */
function editArticles(row: Depart) {
  editForm.id = row.id;
  editForm.name = row.name;
  editForm.departId = row.departId
  editForm.createUser = row.createUser;
  editForm.createTime = row.createTime;
  editForm.updateTime = row.updateTime
  editForm.sort = row.sort
  editForm.url = row.url;
  editForm.isIndex = row.isIndex
  editForm.articleTags = row.articleTags
  collectArticleTag(<string>row.articleTags)

  console.log(row.id, "打开文章列表")
  handleArticleQuery()
  articlesDialog.visible = true;
  articlesDialog.type = 0
}

function initNotInArtworkPageData() {

}

function collectArticleTag(tags: string) {
  let arr: (string)[] = []
  if (tags !== null && tags !== "") {
    arr = tags.split("|")

  }
  tagList.value = [{
    name: "全部",
    value: ""
  }]
  arr.forEach((item: string) => {
    if (item !== null && item !== "") {
      tagList.value.push({
        name: item,
        value: item
      })
    }
  })
}
/**
 * 整理图片标签数据
 * @param tags 
 */
function collectPictureTag(tags: string) {
  let arr: (string)[] = []
  if (tags !== null && tags !== "") {
    arr = tags.split("|")

  }
  tagList.value = [{
    name: "全部",
    value: ""
  }]
  arr.forEach((item: string) => {
    if (item !== null && item !== "") {
      tagList.value.push({
        name: item,
        value: item
      })
    }
  })
}

function handleArticleQuery() {
  loading.value = true;
  queryArticleParams.plateId = editForm.departId
  ArticleApi.getPage(queryArticleParams).then((res) => {
    articlePageData.value = res.records
    articleTotal.value = res.total
    console.log(res)
  })
}
/**
 * 查询图片分页数据
 */
function handlePictureQuery() {
  loading.value = true;
  queryPictureParams.plateId = editForm.departId
  PictureApi.getPage(queryPictureParams).then((res) => {
    picturePageData.value = res.records
    pictureTotal.value = res.total
    console.log(res)
  })
}


/**
 * 添加标签
 */
function addArticleTag() {
  if (newTag.value === null || newTag.value === '' || newTag.value === undefined || newTag.value === 'undefined') {
    ElMessage.error("请输入标签")
    return
  }
  tagList.value.push({
    name: newTag.value,
    value: newTag.value
  })
  newTag.value = ""
  updateArticleTag()
}
/**
 * 更新图片标签数据
 */
function addPictureTag() {
  tagList.value.push({
    name: newTag.value,
    value: newTag.value
  })
  newTag.value = ""
  updatePictureTag()
}



/**
 * 移除艺术机构标签标签
 * @param row 
 */
function removeTag(row: any) {
  console.log(row.$index, "删除标签")
  tagList.value.splice(row.$index, 1)
  updateArticleTag()
}
/**
 * 移除图片标签
 * @param row 
 */
function removePictureTag(row: any) {
  console.log(row.$index, "删除标签")
  tagList.value.splice(row.$index, 1)
  updatePictureTag()
}
/**
 * 更新机构表标签数据
 */
function updateArticleTag() {
  editForm.articleTags = ""
  tagList.value.forEach((item: any) => {
    if (item.value !== "" && item.value !== null) {
      if (editForm.articleTags === "") {
        editForm.articleTags = "|"
      }
      editForm.articleTags = editForm.articleTags + item.value + "|"
    }

  })
  DepartAPI.update(editForm).then(() => {
    handleQuery();
    collectArticleTag(<string>editForm.articleTags)
  })
}
/**
 * 更新机构表标签数据
 */
function updatePictureTag() {
  editForm.pictureTags = ""
  tagList.value.forEach((item: any) => {
    if (item.value !== "" && item.value !== null && item.value !== "undefined") {
      if (editForm.pictureTags === "") {
        editForm.pictureTags = "|"
      }
      editForm.pictureTags = editForm.pictureTags + item.value + "|"
    }

  })
  DepartAPI.update(editForm).then(() => {
    handleQuery();
    collectArticleTag(<string>editForm.pictureTags)
  })
}

/**
 * 添加文章
 */
function addArticle() {

  articlesDialog.type = 1

  editArticleForm.id = null
  editArticleForm.name = ""
  editArticleForm.articleId = ""
  editArticleForm.createUser = null
  editArticleForm.createTime = null
  editArticleForm.updateTime = null
  editArticleForm.sort = null
  editArticleForm.status = null
  editArticleForm.url = null
  editArticleForm.indexContent = ""
  editArticleForm.isIndex = null
  editArticleForm.plateType = null
  editArticleForm.plateId = ""
  editArticleForm.tags = ""
  editArticleForm.content = ""

  tagscheckBoxList.value = []

}
/**
 * 添加图片
 */
function addPicture() {
  pictureDialog.type = 1

  editPictureForm.id = null
  editPictureForm.name = ""
  editPictureForm.pictureId = ""
  editPictureForm.createUser = null
  editPictureForm.createTime = null
  editPictureForm.updateTime = null
  editPictureForm.sort = null
  editPictureForm.status = null
  editPictureForm.url = null
  editPictureForm.isIndex = null
  editPictureForm.plateType = null
  editPictureForm.plateId = ""
  editPictureForm.tags = ""
  editPictureForm.content = ""

  tagscheckBoxList.value = []

}

/**
 * 编辑文章
 */
function editArticle() {
  if (selectDditArticleForm === null || selectDditArticleForm.id === null) {
    ElMessage.error("请选择文章")
    return
  }
  console.log(editArticleForm.content, "编辑文章")
  console.log(selectDditArticleForm.indexContent)

  editArticleForm.content = selectDditArticleForm.content
  articlesDialog.type = 1
  editArticleForm.id = selectDditArticleForm.id
  editArticleForm.name = selectDditArticleForm.name
  editArticleForm.articleId = selectDditArticleForm.articleId
  editArticleForm.createUser = selectDditArticleForm.createUser
  editArticleForm.createTime = selectDditArticleForm.createTime
  editArticleForm.updateTime = selectDditArticleForm.updateTime
  editArticleForm.sort = selectDditArticleForm.sort
  editArticleForm.status = selectDditArticleForm.status
  editArticleForm.url = selectDditArticleForm.url
  editArticleForm.plateType = selectDditArticleForm.plateType
  editArticleForm.plateId = selectDditArticleForm.plateId
  editArticleForm.tags = selectDditArticleForm.tags
  editArticleForm.indexContent = selectDditArticleForm.indexContent
  let tags = <string>editArticleForm.tags;
  let arr: string[] = [];
  if (tags !== null && tags !== '') {
    arr = tags.split("|");
  }
  parentData.value = ""
  tagscheckBoxList.value = arr
  setTimeout(() => {
    parentData.value = <string>selectDditArticleForm.content
  }, 1000);


}

/**
 * 编辑图片
 */
function editPictre() {
  if (selectDditPictureForm.id === null) {
    ElMessage.error("请选择图片")
    return
  }

  pictureDialog.type = 1
  editPictureForm.id = selectDditPictureForm.id
  editPictureForm.name = selectDditPictureForm.name
  editPictureForm.pictureId = selectDditPictureForm.pictureId
  editPictureForm.createUser = selectDditPictureForm.createUser
  editPictureForm.createTime = selectDditPictureForm.createTime
  editPictureForm.updateTime = selectDditPictureForm.updateTime
  editPictureForm.sort = selectDditPictureForm.sort
  editPictureForm.status = selectDditPictureForm.status
  editPictureForm.url = selectDditPictureForm.url
  editPictureForm.plateType = selectDditPictureForm.plateType
  editPictureForm.plateId = selectDditPictureForm.plateId
  editPictureForm.tags = selectDditPictureForm.tags
  let tags = <string>editPictureForm.tags;
  let arr: string[] = [];
  if (tags !== null && tags !== '') {
    arr = tags.split("|");
  }
  tagscheckBoxList.value = arr
  // setTimeout(() => {
  //   parentData.value = <string>selectDditPictureForm.content
  // }, 1000);
}

/**
 * 删除文章
 */
function delArticle() {
  if (selectDditArticleForm.id === null) {
    ElMessage.error("请选择文章")
    return
  }

  ElMessageBox.confirm(
    '该操作会删除该文章其它板块关联，是否删除该文章?',
    '提示',
    {
      confirmButtonText: '确 认',
      cancelButtonText: '取 消',
      type: 'warning',
      draggable: true,
    }
  ).then(() => {
    ArticleApi.delete(selectDditArticleForm).then(() => {
      articlesDialog.type = 0
      handleArticleQuery()
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })

  })
}
/**
 * 删除图片
 */
function delPicture() {
  if (selectDditPictureForm.id === null) {
    ElMessage.error("请选择图片")
    return
  }
  ElMessageBox.confirm(
    '该操作会删除该图片其它板块关联，是否删除该图片?',
    '提示',
    {
      confirmButtonText: '确 认',
      cancelButtonText: '取 消',
      type: 'warning',
      draggable: true,
    }
  ).then(() => {
    PictureApi.delete(selectDditPictureForm).then(() => {
      pictureDialog.type = 0
      handlePictureQuery()
      ElMessage.success("删除成功")
    })
  })
}

/**
 * 保存文章
 */
function saveArticle() {



  editArticleForm.tags = ""
  tagscheckBoxList.value.forEach(item => {
    if (item !== null && item !== '') {
      if (editArticleForm.tags === "") {
        editArticleForm.tags = "|"
      }
      editArticleForm.tags = editArticleForm.tags + item + "|"
    }
  });
  console.log(editArticleForm, "保存文章")
  editArticleForm.plateId = editForm.departId
  editArticleForm.plateType = 1
  console.log(editArticleForm.content, "正文")
  if (editArticleForm.id === null) {
    ArticleApi.add(editArticleForm).then(() => {
      articlesDialog.type = 0
      handleArticleQuery()
    })
  } else {
    ArticleApi.update(editArticleForm).then(() => {
      articlesDialog.type = 0
      selectDditArticleForm.content = ""
      selectDditArticleForm.id = null
      selectDditArticleForm.name = ""
      selectDditArticleForm.articleId = ""
      selectDditArticleForm.createUser = null
      selectDditArticleForm.createTime = null
      selectDditArticleForm.updateTime = null
      selectDditArticleForm.sort = null
      selectDditArticleForm.status = null
      selectDditArticleForm.url = null
      selectDditArticleForm.plateType = null
      selectDditArticleForm.plateId = null
      selectDditArticleForm.tags = ""
      selectDditArticleForm.indexContent = null
      parentData.value = ""
      handleArticleQuery()
    })
  }

}

function closeArtworkDialog() {
  clearCurrentChangeArtist()
  artworkDialog.visible = false
}

function clearCurrentChangeArtist() {
  selectDditArtistForm.id = null
  selectDditArtistForm.artistId = null
}

function handleCurrentChangeArtist(row: Artist) {


  if (row === null) {
    return
  }
  console.log(row, "选中艺术家")
  selectDditArtistForm.id = row.id
  selectDditArtistForm.artistId = row.artistId

}



function saveArtworkRelation() {
  closeArtworkDialog()
  console.log("保存")
}

/**
 * 保存图片
 */
function savePicture() {


  editPictureForm.tags = ""
  tagscheckBoxList.value.forEach(item => {
    if (item !== null && item !== '') {
      if (editPictureForm.tags === "") {
        editPictureForm.tags = "|"
      }
      editPictureForm.tags = editPictureForm.tags + item + "|"
    }
  });
  editPictureForm.plateId = editForm.departId
  editPictureForm.plateType = 1

  if (editPictureForm.id === null) {
    PictureApi.add(editPictureForm).then(() => {
      pictureDialog.type = 0
      handlePictureQuery()
    })
  } else {
    PictureApi.update(editArticleForm).then(() => {
      pictureDialog.type = 0
      handlePictureQuery()
    })
  }

}


/**
 * 返回文章列表
 */
function backArticleList() {
  articlesDialog.type = 0
}

/**
 * 返回图片列表
 */
function backPictureList() {
  pictureDialog.type = 0
}

/**
 * 编辑模板
 * @param row 
 */
function editTemplate(row: Depart) {
  // console.log(row, "绑定艺术家")
  // const url = `/templateManage/depart/${row.departId}`;
  // window.open(url, '_blank');
  let rr = router.resolve({
    name: "DepartTemplateEdit",
    params: {
      departId: row.departId
    }
  });
  window.open(rr.href, '_blank');

}
// 清空文章数据
function clearArticleData() {
  selectDditArticleForm.id = null
  selectDditArticleForm.name = ""
  selectDditArticleForm.articleId = ""
  selectDditArticleForm.createUser = null
  selectDditArticleForm.createTime = null
  selectDditArticleForm.updateTime = null
  selectDditArticleForm.sort = null
  selectDditArticleForm.status = null
  selectDditArticleForm.url = null
  selectDditArticleForm.plateType = null
  selectDditArticleForm.plateId = null
  selectDditArticleForm.tags = ""
  selectDditArticleForm.indexContent = null
  parentData.value = ""

  editArticleForm.id = null
  editArticleForm.name = ""
  editArticleForm.articleId = ""
  editArticleForm.createUser = null
  editArticleForm.createTime = null
  editArticleForm.updateTime = null
  editArticleForm.sort = null
  editArticleForm.status = null
  editArticleForm.url = null
  editArticleForm.isIndex = null
  editArticleForm.plateType = null
  editArticleForm.plateId = ""
  editArticleForm.tags = ""
  editArticleForm.indexContent = ""
  editArticleForm.content = ""
}
// 清空图片数据
function clearPictureData() {
  editPictureForm.id = null
  editPictureForm.name = ""
  editPictureForm.pictureId = ""
  editPictureForm.createUser = null
  editPictureForm.createTime = null
  editPictureForm.updateTime = null
  editPictureForm.sort = null
  editPictureForm.status = null
  editPictureForm.url = null
  editPictureForm.isIndex = null
  editPictureForm.plateType = null
  editPictureForm.plateId = ""
  editPictureForm.tags = ""
  editPictureForm.content = ""
}

/**
 * 初始化选中的文章
 * @param row 
 */
function handleCurrentChangeArticle(row: any) {
  if (row !== null) {
    selectDditArticleForm.id = row.id
    selectDditArticleForm.name = row.name
    selectDditArticleForm.articleId = row.articleId
    selectDditArticleForm.createUser = row.createUser
    selectDditArticleForm.createTime = row.createTime
    selectDditArticleForm.updateTime = row.updateTime
    selectDditArticleForm.sort = row.sort
    selectDditArticleForm.status = row.status
    selectDditArticleForm.url = row.url
    selectDditArticleForm.plateType = row.plateType
    selectDditArticleForm.plateId = row.plateId
    selectDditArticleForm.tags = row.tags
    selectDditArticleForm.content = row.content
    selectDditArticleForm.indexContent = row.indexContent
  }

}

/**
 * 初始化选中的图片
 * @param row 
 */
function handleCurrentChangePicture(row: any) {
  console.log(row, 9999)
  if (row !== null) {
    selectDditPictureForm.id = row.id
    selectDditPictureForm.name = row.name
    selectDditPictureForm.pictureId = row.pictureId
    selectDditPictureForm.createUser = row.createUser
    selectDditPictureForm.createTime = row.createTime
    selectDditPictureForm.updateTime = row.updateTime
    selectDditPictureForm.sort = row.sort
    selectDditPictureForm.status = row.status
    selectDditPictureForm.url = row.url
    selectDditPictureForm.plateType = row.plateType
    selectDditPictureForm.plateId = row.plateId
    selectDditPictureForm.tags = row.tags
    selectDditPictureForm.content = row.content
  }

}

/**
 * 初始化选中的艺术家
 */
function initSelectArtistsInArtworkDialog() {
  selectArtists.value = []
  ArtistRelativeAPI.getList(artistRelativeDTO).then((data: ArtistRelative[]) => {
    selectArtists.value = data;
  })
}

/**
 * 打开绑定艺术品弹框
 * @param row 
 */
function editArtworks(row: Artwork) {

  // 

  artistRelativeDTO.departId = row.departId
  queryArtworkParams.departId = row.departId
  artistRelativeDTO.artistRelativeList = []
  initSelectArtists()
  handleQueryArtwrok()
  artworkDialog.visible = true
}


/**
 * 初始化选中的艺术家
 */
function initSelectArtists() {
  selectArtists.value = []
  ArtistRelativeAPI.getList(artistRelativeDTO).then((data: ArtistRelative[]) => {
    selectArtists.value = data;
    handleQueryArtist()
  })
}
/**
 * 未添加的艺术品
 */
function handleAddArtwork() {
  console.log(selectDditArtistForm)
  queryArtworkParams.departId = artistRelativeDTO.departId
  ArtworkAPI.getPageNoRelativeOnline(queryArtworkParams).then(res => {
    notInArtworkPageData.value = res.records
    artworkTotal.value = res.total
  })
  relativeArtworkDialog.visible = true
}

/**
 * 艺术品加入作品在线
 * @param row 
 * @param index 
 */
function addArtworkToContent(row: any, index: number) {
  let obj = {
    departId: artistRelativeDTO.departId,
    artistId: row.artistId,
  }
  console.log(obj)

}

function handleQueryArtwrok() {
  ArtworkAPI.getPageRelativeOnline(queryArtworkParams).then(res => {
    artworkPageData.value = res.records
    artworkTotal.value = res.total
  })
}

// 添加艺术家到已选列表
function addArtistToSelected(artist: ArtistPageVO) {
  let item = <ArtistRelative>{
    artistId: artist.artistId,
    artistName: artist.name,
    status: 1,
    departId: selectDepartId.value
  }
  selectArtists.value.unshift(item);
  handleQueryArtist()
}

// 从已选列表移除艺术家
function removeArtistFromSelected(artist: ArtistRelative) {
  const index = selectArtists.value.indexOf(artist);
  if (index > -1) {
    selectArtists.value.splice(index, 1);
  }
  handleQueryArtist()

}

/** 查询 */
function handleQuery() {
  loading.value = true;
  DepartAPI.getPage(queryParams)
    .then((data: { records: DepartPageVO[] | undefined; total: number; }) => {
      departPageData.value = data.records;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/**
 * 艺术机构-艺术家关联查询
 */
function handleQueryArtist() {
  // loading.value = true;
  if (searchArtistName.value !== "") {
    queryArtistParams.name = searchArtistName.value
  } else {
    queryArtistParams.name = null
  }
  ArtistsAPI.getPage(queryArtistParams)
    .then((data) => {
      artistsPageData.value = []
      data.records.forEach((item: any) => {
        let index = selectArtists.value.findIndex((_item: any) => {
          return item.artistId === _item.artistId
        })
        if (index === -1) {
          artistsPageData.value.push(item)
        }
      })
    })
    .finally(() => {
      // loading.value = false;
    });
}
/**
 * 保存修改
 */
function editItem() {
  // 当id存在时执行修改操作，否则执行新增操作
  if (editForm.id) {
    DepartAPI.update(editForm).then(() => {
      handleQuery();
      dialog.visible = false;
    })
  } else {
    DepartAPI.add(editForm).then(() => {
      handleQuery();
      dialog.visible = false;
    })
  }

}
function deleteRow(row: Depart) {
  DepartAPI.delete(row).then(() => {
    handleQuery();
  })
}

/**
 * 保存绑定关系
 */
function saveRelation() {
  artistRelativeDTO.departId = selectDepartId.value;
  artistRelativeDTO.artistRelativeList = selectArtists.value


  ArtistRelativeAPI.saveRelation(artistRelativeDTO).then(() => {
    artistkDialog.visible = false;
    handleQuery();
  })

}
/**
 * 打开图片编辑弹框
 * @param row 
 */
function editPictures(row: Depart) {
  editForm.id = row.id;
  editForm.name = row.name;
  editForm.departId = row.departId
  editForm.createUser = row.createUser;
  editForm.createTime = row.createTime;
  editForm.updateTime = row.updateTime
  editForm.sort = row.sort
  editForm.url = row.url;
  editForm.isIndex = row.isIndex
  editForm.pictureTags = row.pictureTags
  collectPictureTag(<string>row.pictureTags)

  console.log(row.id, "打开文章列表")
  handlePictureQuery()
  pictureDialog.visible = true;
  pictureDialog.type = 0
}

function getFirstLevelData() {
  RegionAPI.getList(<RegionQuery>{ type: 0 }).then(res => {
    regionList.value = res
    handleQuery();
  })
}

function getDepartTypeList() {
  DepartTypeAPI.getList(<DepartTypeQuery>{}).then(res => {
    departTypeList.value = res
  })
}


onMounted(() => {
  getFirstLevelData();
  getDepartTypeList();



  handleQuery();
});
</script>
<style>
.tox {
  z-index: 99999 !important;
}
</style>
